<template>
  <div class="select-box">
    <ul class="select-box-list">
      <li class="select-box-all select-box-item" :class="'select-'+selectState"
          @click="onSelectAllClick">全部车辆<i class="select-icon" :class="[selectAllIcon]"></i></li>
      <li class="select-box-item" v-for="(list,index) in selectList"
          :key="list.id" @click="onSelectItemClick(list.id)">{{list.name}}<i class="select-icon" :class="[list.selected?'selected':'unselected']"></i></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "select-box",
    data() {
      return {
        selectState: 'all', //3种状态 all  some  empty
        selectList: [
          {
            id: 1,
            name: '自定义1',
            selected: true
          },
          {
            id: 2,
            name: '自定义2',
            selected: true
          },
          {
            id: 3,
            name: '自定义3',
            selected: true
          },
          {
            id: 4,
            name: '自定义4',
            selected: true
          },
          {
            id: 5,
            name: '自定义5',
            selected: true
          },
        ]
      }
    },
    methods: {
      updateResult(){
        let resultIds = [];
        this.selectList.map((item)=>{
          if(item.selected) resultIds.push(item.id.toString());
          this.$emit('result',resultIds)
        })
      },
      onSelectAllClick() {
        switch (this.selectState) {
          case 'all':
          case 'some':
            this.selectState = 'empty';
            this.selectList.map((item, index,origin) => {
              this.selectList[index].selected = false;
            });
            this.updateResult();
            break;
          case 'empty':
            this.selectState = 'all';
            this.selectList.map((item, index,origin) => {
              this.selectList[index].selected = true;
            });
            this.updateResult();
            break;
          default:
            this.selectState = 'all';
            this.selectList.map((item, index,origin) => {
              this.selectList[index].selected = true;
            });
            this.updateResult();
        }
      },
      onSelectItemClick(id) {
        let allSelected = true;
        let allUnSelected = false;
        this.selectList.map((item,index,origin) => {
          // if(item.id === id) {origin[index].selected = !item.selected; console.log(this.selectList)}
          if(item.id === id) {this.selectList[index].selected = !item.selected;}
        });

        this.selectList.map((item,index,origin) => {
          allSelected = item.selected && allSelected;//检测完后仍然为true 则通过
          allUnSelected = item.selected || allUnSelected;//检测完之后仍然为false 则通过
        });
        allUnSelected = !allUnSelected;//取一下反，为了不和变量名产生歧义

        if(allSelected){//全选
          this.selectState = 'all'
        }else if(!allSelected && !allUnSelected){//不是全选，也不是全空
          this.selectState = 'some'
        }else{//全空
          this.selectState = 'empty'
        }
        this.updateResult();
      }
    },
    computed:{
      selectAllIcon:function () {
        if(this.selectState==='all'){
          return 'selected'
        }else if(this.selectState === 'some'){
          return 'selected-some'
        }else{
          return 'unselected'
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/scss/const";
  @import "../../common/scss/func";

  .select-box{
    font-size:16px;
    color:white;
    background: $color-bg-component;
    border:1px solid $color-border;
    border-radius: 4px;
    .select-box-list{
      list-style: none;

      .select-box-all{
      }
      .select-box-item{
        color:$color-comm;
        font-size:14px;
        cursor:pointer;
        text-align:center;
        height:40px;
        line-height:40px;
        position:relative;
        &:hover{
          background: $color-bg-hover;
        }
      }

      .select-icon{
        display:inline-block;
        position:absolute;
        top:50%;
        left: 83%;
        transform: translate(0,-50%);
      }
      .selected{
        @include bg-img-center(20px,14px,'./images/selected@2x.png')
      }
      .unselected{
        @include bg-img-center(14px,14px,'./images/unselected@2x.png')
      }
      .selected-some{
        @include bg-img-center(14px,14px,'./images/selected-some@2x.png')
      }
    }
  }

</style>
